<template>
  <div class="container">
    <div class="app-container">
      组织架构
      <!-- <el-tree :data="depts" :props="{label:'name',children:'child'}" default-expand-all> -->
      <el-tree :data="depts" :props="{ label: 'name' }" default-expand-all>
        <template #default="{ data }">
          <el-row style="width: 100%">
            <el-col :span="20">{{ data.name }}</el-col>
            <el-col :span="4">
              <el-row>
                <el-col :span="12">{{ data.managerName || "未分配" }}</el-col>
                <el-col :span="12">
                  <el-dropdown @command="handleCommand($event, data.id)">
                    <span class="el-dropdown-link">
                      下拉菜单<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        command="add"
                      >添加部门</el-dropdown-item>
                      <el-dropdown-item
                        command="edit"
                      >编辑部门</el-dropdown-item>
                      <el-dropdown-item
                        command="del"
                      >删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 弹出框组件 -->
    <addDept
      ref="deptRef"
      :pid="pid"
      :showdepts="souceDepts"
      :show-dialog.sync="showdialog"
      @reload="getDepts"
    />
  </div>
</template>
<script>
import { translateToTreeData } from '@/utils/index'
import { reqGetDepts, reqDelDept } from '@/api/department'
import addDept from './components/add-dept'
export default {
  name: 'Department',
  components: {
    addDept
  },
  data() {
    return {
      // 默认情况下 label 是叶子的名字  chilren是依赖关系的字段
      // 如果默认不是需要props指定
      // list: [
      //   { label: '中国',
      //     children: [
      //       { label: '河北', children: [{ label: '石家庄' }] }
      //     ]
      //   }
      // ]

      // depts: [
      //   { name: '中国',
      //     child: [
      //       { name: '河北', child: [{ name: '石家庄' }] }
      //     ]
      //   }
      // ]
      depts: [],
      showdialog: false,
      // 存储一份原始的数据
      souceDepts: [],
      pid: 0
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    // 获取部门列表
    // 所有的一级部门的pid是 1 , 对应一级部门的子部门的pid是一级部门的id
    async  getDepts() {
      const res = await reqGetDepts()
      console.log(res)
      this.souceDepts = res.data // 存储一份原始的数据
      this.depts = translateToTreeData(res.data, 0)
    },

    // translateToTreeData,
    // 点击下拉菜单项
    async  handleCommand(command, id) {
      if (command === 'add') {
        // console.log('添加')
        this.showdialog = true
        // 记录点击的部门的id
        this.$refs.deptRef.title = '新增部门'
        this.pid = id
      }
      if (command === 'edit') {
        console.log('编辑')
        this.showdialog = true
        this.$refs.deptRef.title = '编辑部门'
        // 记录点击的部门的id
        this.pid = id // 记录点击的部门的id
        // this.$refs.deptRef.showEditDept(id)  另一种方式
        // 调用子组件的方法
        // 记录完毕部门的id后 等到dom更新完毕后再调用子组件
        this.$nextTick(() => {
          this.$refs.deptRef.showEditDept(id)
        })
      } if (command === 'del') {
        console.log('删除')
        // 1.确认提示
        const str = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {})
        if (str === 'confirm') {
          // 2.发送请求
          await reqDelDept(id)
          // 3.提示略过
          // 4.重新获取渲染
          this.getDepts()
        }
      }
    }
  }

}

</script>
<style lang="scss" scoped>
.app-container {
  padding: 0 50px;
}
</style>
